<template>
    <view class="map-page page-content">
        <view class="page-content-body">
            <!-- 地图组件 -->
            <map
                id="myMap"
                class="map-container"
                :longitude="mapData.longitude"
                :latitude="mapData.latitude"
                :scale="mapData.scale"
                :markers="mapData.markers"
                :polyline="mapData.polyline"
                :circles="mapData.circles"
                :controls="mapData.controls"
                :include-points="mapData.includePoints"
                :show-location="mapData.showLocation"
                :enable-3D="mapData.enable3D"
                :show-compass="mapData.showCompass"
                :enable-overlooking="mapData.enableOverlooking"
                :enable-zoom="mapData.enableZoom"
                :enable-scroll="mapData.enableScroll"
                :enable-rotate="mapData.enableRotate"
                :enable-satellite="mapData.enableSatellite"
                :enable-traffic="mapData.enableTraffic"
                :enable-building="mapData.enableBuilding"
                :enable-indoor="mapData.enableIndoor"
                @tap="onMapTap"
                @markertap="onMarkerTap"
                @controltap="onControlTap"
                @regionchange="onRegionChange"
                @updated="onMapUpdated"
            ></map>

            <!-- 控制按钮区域 -->
            <view class="map-controls">
                <view class="control-btn" @click="getCurrentLocation">
                    <text class="control-text">定位</text>
                </view>
                <view class="control-btn" @click="toggleSatellite">
                    <text class="control-text">{{ mapData.enableSatellite ? '普通' : '卫星' }}</text>
                </view>
                <view class="control-btn" @click="toggleTraffic">
                    <text class="control-text">{{ mapData.enableTraffic ? '关闭路况' : '开启路况' }}</text>
                </view>
            </view>

            <!-- 信息面板 -->
            <view class="info-panel" v-if="selectedMarker">
                <view class="info-title">{{ selectedMarker.title }}</view>
                <view class="info-desc">{{ selectedMarker.desc }}</view>
                <view class="info-distance">距离: {{ selectedMarker.distance }}km</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue';
import {getAllHospitals} from '@/mock/city_hospital';

// 地图数据
const mapData = reactive({
    longitude: 116.397128, // 北京天安门经度
    latitude: 39.916527, // 北京天安门纬度
    scale: 16, // 缩放级别
    markers: [], // 标记点
    polyline: [], // 路线
    circles: [], // 圆形区域
    controls: [], // 控件
    includePoints: [], // 视野包含的点
    showLocation: true, // 显示当前位置
    enable3D: false, // 开启3D
    showCompass: false, // 显示指南针
    enableOverlooking: false, // 开启俯视
    enableZoom: true, // 开启缩放
    enableScroll: true, // 开启拖拽
    enableRotate: true, // 开启旋转
    enableSatellite: false, // 开启卫星图
    enableTraffic: false, // 开启路况
    enableBuilding: true, // 开启建筑
    enableIndoor: false, // 开启室内图
});

// 选中的标记点
const selectedMarker = ref(null);

let hospitalData = getAllHospitals();
// 模拟医院数据
// const hospitalData = [
//     {
//         id: 1,
//         longitude: 116.397128,
//         latitude: 39.916527,
//         title: '北京协和医院',
//         desc: '三甲医院，综合实力强',
//         distance: 0.5,
//         iconPath: '/static/test/hospital_point.png',
//         width: 30,
//         height: 30,
//     },
//     {
//         id: 2,
//         longitude: 116.407128,
//         latitude: 39.926527,
//         title: '北京友谊医院',
//         desc: '三甲医院，专科特色',
//         distance: 1.2,
//         iconPath: '/static/test/hospital_point.png',
//         width: 30,
//         height: 30,
//     },
//     {
//         id: 3,
//         longitude: 116.387128,
//         latitude: 39.906527,
//         title: '北京朝阳医院',
//         desc: '三甲医院，急诊科强',
//         distance: 0.8,
//         iconPath: '/static/test/hospital_point.png',
//         width: 30,
//         height: 30,
//     },
//     {
//         id: 4,
//         longitude: 116.417128,
//         latitude: 39.936527,
//         title: '北京同仁医院',
//         desc: '三甲医院，眼科专科',
//         distance: 2.1,
//         iconPath: '/static/test/hospital_point.png',
//         width: 30,
//         height: 30,
//     },
// ];

// 初始化地图数据
const initMapData = () => {
    // 设置标记点
    mapData.markers = hospitalData.map((hospital) => ({
        id: hospital.id,
        longitude: hospital.longitude,
        latitude: hospital.latitude,
        title: hospital.title,
        iconPath: hospital.iconPath,
        width: hospital.width,
        height: hospital.height,
        callout: {
            content: hospital.title,
            color: '#333',
            fontSize: 14,
            borderRadius: 5,
            bgColor: '#fff',
            padding: 8,
            display: 'BYCLICK',
        },
    }));

    // 设置视野包含的点
    mapData.includePoints = hospitalData.map((hospital) => ({
        longitude: hospital.longitude,
        latitude: hospital.latitude,
    }));

    // 添加圆形区域（搜索范围）
    mapData.circles = [
        {
            longitude: mapData.longitude,
            latitude: mapData.latitude,
            radius: 2000, // 2km半径
            color: '#95ec69',
            fillColor: '#95ec6920',
            strokeWidth: 2,
        },
    ];

    // 添加控件
    mapData.controls = [
        // {
        //     id: 1,
        //     iconPath: '/static/test/hospital_point.png',
        //     position: {
        //         left: 20,
        //         top: 100,
        //         width: 40,
        //         height: 40,
        //     },
        //     clickable: true,
        // },
    ];
};

// 获取当前位置
const getCurrentLocation = () => {
    uni.getLocation({
        type: 'gcj02',
        success: (res) => {
            console.log('当前位置:', res);
            mapData.longitude = res.longitude;
            mapData.latitude = res.latitude;

            // 更新圆形区域
            mapData.circles = [
                {
                    longitude: res.longitude,
                    latitude: res.latitude,
                    radius: 2000,
                    color: '#95ec69',
                    fillColor: '#95ec6920',
                    strokeWidth: 2,
                },
            ];

            // 强制更新地图位置
            setTimeout(() => {
                // 使用地图上下文API移动地图到当前位置
                const mapContext = uni.createMapContext('myMap');
                mapContext.moveToLocation({
                    longitude: res.longitude,
                    latitude: res.latitude,
                    success: () => {
                        console.log('地图移动到当前位置成功');
                    },
                    fail: (err) => {
                        console.error('地图移动失败:', err);
                    },
                });
            }, 100);

            uni.showToast({
                title: '定位成功',
                icon: 'success',
            });
        },
        fail: (err) => {
            console.error('定位失败:', err);
            uni.showToast({
                title: '定位失败',
                icon: 'none',
            });
        },
    });
};

// 切换卫星图
const toggleSatellite = () => {
    mapData.enableSatellite = !mapData.enableSatellite;
};

// 切换路况
const toggleTraffic = () => {
    mapData.enableTraffic = !mapData.enableTraffic;
};

// 地图点击事件
const onMapTap = (e) => {
    console.log('地图点击:', e);
    selectedMarker.value = null;
};

// 标记点点击事件
const onMarkerTap = (e) => {
    console.log('标记点点击:', e);
    const markerId = e.detail.markerId;
    const hospital = hospitalData.find((h) => h.id === markerId);
    if (hospital) {
        selectedMarker.value = hospital;
    }
};

// 控件点击事件
const onControlTap = (e) => {
    console.log('控件点击:', e);
    uni.showToast({
        title: '控件被点击',
        icon: 'none',
    });
};

// 地图区域变化事件
const onRegionChange = (e) => {
    console.log('地图区域变化:', e);
};

// 地图更新完成事件
const onMapUpdated = (e) => {
    console.log('地图更新完成:', e);
};

// 页面加载时初始化
onMounted(() => {
    initMapData();
    getCurrentLocation();
});
</script>

<style lang="scss" scoped>
.map-page {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .page-content-body {
        flex: 1;
        position: relative;
        padding: 0;
    }
}

.map-container {
    width: 100%;
    height: 100%;
}

.map-controls {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .control-btn {
        width: 120rpx;
        height: 80rpx;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10rpx);

        .control-text {
            font-size: 24rpx;
            color: #333;
            font-weight: 500;
        }

        &:active {
            background-color: rgba(255, 255, 255, 0.7);
            transform: scale(0.95);
        }
    }
}

.info-panel {
    position: absolute;
    bottom: 40rpx;
    left: 40rpx;
    right: 40rpx;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10rpx);

    .info-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 16rpx;
    }

    .info-desc {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 12rpx;
    }

    .info-distance {
        font-size: 24rpx;
        color: #95ec69;
        font-weight: 500;
    }
}
</style>
